import React from 'react';
import { connect } from 'react-redux';
import {SiderContainer, SiderWrapper, SiderHeader, Logo, SiderMenu} from './style';

function Sider(props) {

	const { menu } = props

	const scrollToAnchor = (id) => {
		if (id) {
			// 找到锚点
			let anchorElement = document.getElementById(id);
			// 如果对应id的锚点存在，就跳转到锚点
			if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
		}
	}


	const getMenuTree = (menu) => {
		return menu.map((item) => {
			if (!item.children) {
				return <li><a key={item.key} onClick={() => scrollToAnchor(item.key)}>{item.name}</a></li>
			}
			return <li>
				<a key={item.key} onClick={() => scrollToAnchor(item.key)}>{item.name}</a>
				<ul>
					{item?.children ? getMenuTree(item.children) : ''};
				</ul>
			</li>
		});
	}

	return (
			<SiderContainer >
				<SiderWrapper >
					<SiderHeader>
						<Logo>
							<a href="https://peterstudio.site" target='_blank'><img src='./images/logo.png' alt=""/></a>
							<h1>Woolly-Doc</h1>
						</Logo>
					</SiderHeader>
					<SiderMenu>
						{ getMenuTree(menu)}
					</SiderMenu>
				</SiderWrapper>
			</SiderContainer>
	);
}


const mapState = (state) => {
	return {

	}
}


const mapDispatch = (dispatch) => {
	return {

	}
}

export default connect(mapState, mapDispatch)(Sider);
